<template>
	<view class="mask" v-if="show" @click="cancel">
		<view class="bac-color-fff filter-mudule pos-rel" :style="{width:width}" @click.stop>
			<view class="section mar-t-10">
				<view class="font-size-18 font-fa-me font-bold">
					<text>咨询方式</text>
				</view>
				<view class="mar-t-20 text-center do-consult flex">
					<text
						class="flex-1 mar-r-20"
						v-for="(way,i) in ways"
						:key="i"
						:class="{active:i==way_index}"
						@click="changeWay(i)"
					>{{way.name}}</text>
				</view>
			</view>
			<view class="section mar-t-20">
				<view class="font-size-18 font-fa-me font-bold">
					<text>咨询师性别</text>
				</view>
				<view class="mar-t-20 text-center do-consult flex">
					<text
						class="flex-1 mar-r-20"
						v-for="(sex,i) in sexs"
						:key="i"
						:class="{active:i==sex_index}"
						@click="changeSex(i)"
					>{{sex.name}}</text>
				</view>
			</view>
			<view class="section mar-t-20">
				<view class="font-size-18 font-fa-me font-bold">
					<text>咨询类别</text>
				</view>
				<view class="choose-consult-time mar-t-20">
					<block v-if="tags.length">
						<view v-for="(tag,i) in tags" :key="i" :class="{acitve:i==tag_index}" @click="changeTag(i)">
							<text>{{tag.tag_name}}</text>
						</view>
					</block>
				</view>
			</view>
			<view class="footer text-center flex">
				<view class="flex-1 reset-btn" @click="clear">重置</view>
				<view class="flex-1 sub-btn" @click="confirm">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		width: {
			type: String,
			default: '#333333'
		},
		show: {
			type: Boolean,
			default: false
		},
		tags: {
			type: Array
		}

		// sex_index: {
		// 	type: Number,
		// 	default: 0
		// }
	},
	data() {
		return {
			tag_index: 0,
			sexs: [
				{ gender: '', name: '不限' },
				{ gender: '10', name: '男' },
				{ gender: '20', name: '女' }
			],
			sex_index: 0,
			ways: [
				{ way: '', name: '不限' },
				{ way: '10', name: '线上' },
				{ way: '20', name: '线下' }
			],
			way_index: 0
		}
	},
	methods: {
		cancel() {
			this.$emit('update:show', false)
		},
		changeTag(i) {
			this.tag_index = i
			//this.$emit('update:tag_index', i)
		},
		changeSex(i) {
			this.sex_index = i
			//this.$emit('update:gender', this.sexs[i].gender)
		},
		changeWay(i) {
			this.way_index = i
			//this.$emit('update:way', this.ways[i].way)
		},
		confirm() {
			this.$emit('confirm', {
				way: this.ways[this.way_index].way,
				gender: this.sexs[this.sex_index].gender,
				tag:
					this.tags[this.tag_index].id > 0
						? this.tags[this.tag_index].tag_name
						: ''
			})
			this.$emit('update:show', false)
		},
		clear() {
			this.sex_index = 0
			this.way_index = 0
			this.tag_index = 0
		}
	}
}
</script>

<style scoped>
.filter-mudule {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
}
.filter-mudule::after {
	clear: both;
}
.filter-mudule .section {
	padding-right: 10px;
	padding-left: 10px;
	box-sizing: border-box;
}
.do-consult text {
	display: inline-block;
	height: 32px;
	line-height: 32px;
	border-radius: 3px;
	font-size: 14px;
	color: #222222;
	background-color: #f6f6f6;
}
.do-consult .active {
	background-color: #0088ff !important;
	color: #ffffff !important;
}
.choose-consult-time view {
	display: inline-block;
	box-sizing: border-box;
	/* border: 1px solid #dadada; */
	margin-left: 10px;
	margin-bottom: 10px;
	color: #222222;
	background-color: #f6f6f6;
	text-align: center;
	/* font-weight: 500; */
	font-size: 14px;
	border-radius: 3px;
	width: 90px;
	height: 32px;
	line-height: 32px;
}
.choose-consult-time .acitve {
	color: #ffffff !important;
	background-color: #0088ff !important;
}
.footer {
	height: 45px;
	line-height: 45px;
	font-size: 18px;
	font-weight: bold;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	border-top: 1rpx solid #efefef;
}
.sub-btn {
	background-color: #0088ff;
	color: #ffffff;
}
</style>